<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.js"></script>
    <title>Document</title>
</head>
<style>
    #box {
        width: 300px;
        height: 250px;
        /* border: 1px solid #000; */
        text-align: center;
        margin: auto;
    }
</style>

<body>
    <div id="app">
        <div id="box">
            用户名：&nbsp;&nbsp;&nbsp;<input type="text" v-model="name" @blur="namex()"><span
                v-show="show">{{namexs}}</span><br><br>
            密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="mima"
                @blur="mimax()"><span v-show="show">{{mimaxs}}</span><br><br>
            确认密码：<input type="text" v-model="queren" @blur="querenx()"><span v-show="show">{{querenxs}}</span><br><br>
            邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="youxiang"
                @blur="youxiangx()"><span v-show="show">{{youxiangxs}}</span><br><br>
            验证码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="yanzheng" @blur="yanzhengx()"><span
                v-show="show">{{yanzhengma}}</span>

            <p v-show="true" style="width: 80px;height:25px; border: 1px solid #000; margin: auto; margin-top: 15px;">
                {{yanzhengxs}}</p>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                show: false,
                name: "",
                mima: "",
                queren: "",
                youxiang: "",
                yanzheng: "",
                namexs: "",
                mimaxs: "",
                querenxs: "",
                youxiangxs: "",
                yanzhengxs: "",
                yanzhengma: "",
                name1: /^[\u4e00-\u9FA5]{4,8}$/,
                mima1: /^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])\w{6,20}/,
                youxiang1: /[a-zA-Z0-9]{4,20}@qq\.com$/,
                youxiang2: /[a-zA-Z0-9]{4,20}@163\.com$/,
                youxiang3: /[a-zA-z0-9]{4,20}@126\.com$/,
                selectChar: new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
                    'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'),
                code: "",
                codeLength: 5,
            }
        },
        methods: {
            namex() {

                this.name1.test(this.name) == true ? this.namexs = '√' : this.namexs = 'x'
                this.show = true
            },
            mimax() {
                this.mima1.test(this.mima) == true ? this.mimaxs = '√' : this.mimaxs = 'x'
                this.show = true
            },
            querenx() {
                this.queren == this.mima ? this.querenxs = '√' : this.querenxs = 'x'
            },
            youxiangx() {
                if (this.youxiang1.test(this.youxiang)) {
                    this.youxiangxs = '√'
                    this.show = true
                } else if (this.youxiang2.test(this.youxiang)) {
                    this.youxiangxs = '√'
                    this.show = true
                } else if (this.youxiang3.test(this.youxiang)) {
                    this.youxiangxs = '√'
                    this.show = true
                } else {
                    this.youxiangxs = 'x'
                    this.show = true
                }
            },
            fun() {
                for (var i = 0; i < this.codeLength; i++) {
                    var charIndex = Math.floor(Math.random() * 36);
                    this.code += this.selectChar[charIndex];
                }
                this.yanzhengxs = this.code
            },
            yanzhengx() {
                this.show = true
                this.yanzheng == this.yanzhengxs == true ? this.yanzhengma = '√' : this.yanzhengma = 'x'

            }
        },
        mounted() {
            this.fun()
        }
    })
</script>

</html>